<template>
	<view>
		<view v-if="bjapplyList.length>0">
			<view class="search-title">
				<view>全部备件列表</view>
				<!-- <view>备件数量：16件</view> -->
			</view>
			<view class="search-list">
				<view class="search-item" v-for="(item,index) in bjapplyList" :key="index">
					<view class="item-top">
						<!-- <view class="item-name"> {{item.name}}</view> -->
						<view class="item-txt">
							<view class="top">
								<view class="left-icon">
									<image
										:src="item.partPicture?item.partPicture:'../../static/images/index/beijian.png' ">
									</image>
								</view>
								<view class="right-txt">
									<view class="txt-left">
										<view class="txt1">{{item.partNum!=''?item.partNum+'-':''}}{{item.partName}}
										</view>
										<view class="txt-status"
											:class="[item.approveStatus==0?'txt-status':item.approveStatus==1?'txt-status2':item.approveStatus==3?'txt-status3':item.approveStatus==2?'txt-status4':'']">
											{{item.approveStatus==0?'待提交':item.approveStatus==1?'待审核':item.approveStatus==3?'已通过':item.approveStatus==2?'不通过':''}}
										</view>
									</view>
									<view class="txt-right">
										<view class="txt2">{{item.partTypeName}}</view>
										<view class="addnum">
											<view class="total">共{{item.totalAmount}}件</view>
											<view class="iconfont icon-app-delete1 delete-btn"
												v-if="item.approveStatus==0" @click="deleteBjItem(item,index)"></view>
										</view>
									</view>
								</view>
							</view>

							<view class="txt4 text-borderTop" v-if="item.approveStatus==2">
								<view class="txt4-icon">
									<view class="iconfont icon-app-gantanhao" style="margin-right: 8rpx;"></view>
									<text class="txt4-icon-txt">原因</text>

								</view>
								<view class="txt4-reason">{{item.reason}}</view>

							</view>
						</view>
					</view>

				</view>
			</view>
			<u-gap height="7" bgColor="#f2f2f2"></u-gap>
			<view class="bx-list">
				<view class="bx-list-title" @click="togoPeopleSelect">
					<view class="left">
						<view style="color: red;">*</view>审核人
					</view>
					<view class="right1">
						<view :class="[realName!=''?'select-bg':'']">
							{{realName!=''?realName:'选择人员'}}
						</view>
						<view class="iconfont icon-app-xiangyou"></view>
					</view>
				</view>
			</view>
			<u-gap height="1" bgColor="#f2f2f2"></u-gap>
			<view class="item-btn" style="margin-top: 2rpx;">
				<view class="chuku" @click="addBeijianChange">添加备件</view>
				<!-- <text class="xian">|</text> -->
				<u-line direction="col" length="48rpx" />
				<view class="ruku" @click="$dianji(togoComfirApplybtn,'onoff')">提交申请</view>
			</view>
			<u-gap height="1" bgColor="#f2f2f2"></u-gap>
			<!-- <view class="bottom-subside"></view> -->
		</view>
		<view class="not-data" v-if="bjapplyList.length==0">
			<image src="@/static/images/index/noMenu.png" mode="widthFix"></image>
			<view class="txt1">暂未添加备件信息</view>
			<view class="txt2" @click="addBeijianChange">添加备件</view>
		</view>
		<view class="bx-title2">
			提示: 如果关联备件，需要审核后才可提交验证
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			bjapplyList: {
				type: Array,
				default () {
					return [];
				}
			},
			realName: {
				type: String,
				default () {
					return '';
				}
			}
		},
		data() {
			return {
				onoff: true
			}
		},
		onLoad() {

		},
		methods: {
			//添加备件
			addBeijianChange() {
				this.$emit("addBeijianChange")
			},
			//提交申请
			togoComfirApplybtn() {
				this.$emit("togoComfirApplybtn")
			},
			//删除备件
			deleteBjItem(item, index) {
				let dd = {
					item: item,
					index: index
				}
				this.$emit("deleteBjItem", dd)
			},
			//选择审核人
			togoPeopleSelect() {
				let flag = this.bjapplyList.every(item => item.approveStatus != 0)
				if (flag) {
					uni.$u.toast('该状态不能修改审核人');
					return
				}
				this.$emit("togoPeopleSelect")
			}

		}
	}
</script>

<style lang="scss">
	.search-title {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #4D4D4D;
		// padding: 20rpx 30rpx;
		padding: 28rpx 32rpx 28rpx 32rpx;
		background: #F5F5F5;
	}

	.search-list {
		background: #fff;
		margin-top: 2rpx;


		.search-item {
			padding: 8rpx;
			border-bottom: 1px solid #f2f2f2;

			.item-top {
				display: flex;
				align-items: center;

				.item-name {
					color: #000000;
					font-size: 34rpx;
				}

				.item-txt {
					// padding: 20rpx 0 20rpx 10rpx;
					padding: 12px;
					display: block;
					width: 100%;

					.top {
						display: flex;
						width: 100%;

						.left-icon {
							border-radius: 8rpx;

							image {
								width: 152rpx;
								height: 152rpx;
								border-radius: 8rpx;
							}
						}

						.right-txt {
							padding-left: 24rpx;
							width: 100%;

							.txt-left {
								display: flex;
								align-items: flex-start;
								justify-content: space-between;

								.txt1 {
									width: 365rpx;
									height: 75rpx;
									font-size: 32rpx;
									color: #2B2B2B;
									padding-bottom: 16rpx;
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 2;
								}

								.txt-status {
									font-size: 24rpx;
									color: #0F53AC;
									background-color: rgba(15, 83, 172, 0.2);
									display: flex;
									justify-content: center;
									align-items: center;
									padding: 10rpx 25rpx;
									border-radius: 4px;
								}

								.txt-status2 {
									color: #FC770A;
									background-color: rgba(252, 119, 10, 0.2);
								}

								.txt-status3 {
									color: #02AD82;
									background-color: rgba(2, 173, 130, 0.2);
								}

								.txt-status4 {
									color: #FF4D4D;
									background-color: rgba(255, 77, 77, 0.2);
								}
							}

							.txt-right {
								display: flex;
								align-items: center;
								justify-content: space-between;
								padding-top: 10rpx;

								.txt2 {
									font-size: 28rpx;
									color: #8c8c8c;
								}

								.addnum {
									display: flex;
									align-items: center;
									font-size: 28rpx;

									.delete-btn {
										color: #fa4016;
										margin-left: 10rpx;
										font-size: 40rpx;
									}

									.total {
										color: #666666;
									}
								}
							}
						}
					}



					.txt4 {
						margin-top: 24rpx;
						padding: 12px 0 0 0;

						.txt4-icon {
							display: flex;
							align-items: center;
							color: #FC770A;
							font-size: 30rpx;

							.txt4-icon-txt {
								color: #8C8C8C;
							}
						}

						.txt4-reason {
							color: #4D4D4D;
							font-size: 28rpx;
							margin-top: 8rpx;
							word-wrap: break-word;
							word-break: break-all;
						}
					}
				}

			}


		}
	}

	.item-btn {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 24rpx 0;
		background: #fff;

		.chuku {
			width: 45%;
			font-size: 32rpx;
			color: #666666;
			text-align: center;
		}

		.ruku {
			width: 45%;
			font-size: 32rpx;
			color: #0F53AC;
			text-align: center;
		}

		.xian {
			color: #EDEDED;
		}
	}

	.not-data {
		background: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: 2rpx;
		padding: 150rpx 0;

		image {
			width: 224rpx;
			height: 172rpx;
		}

		.txt1 {
			font-size: 30rpx;
			color: #8c8c8c;
			padding-top: 40rpx;
		}

		.txt2 {
			font-size: 34rpx;
			color: #0F53AC;
			margin-top: 40rpx;
			border: 1px solid #0F53AC;
			border-radius: 12rpx;
			padding: 20rpx 80rpx;
		}
	}

	.bottom-subside {
		width: 100%;
		height: 120rpx;
	}

	.bx-title2 {
		width: 100%;
		color: #8c8c8c;
		font-size: 28rpx;
		padding: 32rpx;
		background: #ffffff;
	}

	.select-bg {
		color: #000000;
	}
</style>